<template>
  <Layout :tab-id="2">
    <template #content>
      <view
        class="min-h-screen bg-gradient-to-b from-[#90b8fe] to-white p-4"
        :style="{ paddingTop: useSafeArea.getSafeAreaTop + 30 + 'px' }"
      >
        <view class="flex items-center justify-between mt-2 mb-4">
          <view class="text-xl font-medium text-[#0f3a80]">物资捐赠</view>
          <view class="text-sm text-[#0f3a80] opacity-80">社区互助</view>
        </view>

        <view class="w-full rounded-2xl overflow-hidden shadow-lg">
          <image
            src="../../static/banner.png"
            mode="widthFix"
            alt="捐赠Banner"
            class="w-full h-[220rpx] object-cover"
          />
        </view>

        <!-- 分类 Tab -->
        <view class="mt-4 bg-white p-3 rounded-xl shadow-sm">
          <view class="flex items-center justify-between">
            <view class="flex space-x-4 overflow-auto">
              <view
                v-for="(t, idx) in tabs"
                :key="t"
                @click="activeTab = idx"
                :class="[
                  'px-3 py-1 rounded-full text-sm cursor-pointer',
                  activeTab === idx
                    ? 'bg-[#f0f8ff] text-[#2469ff] font-semibold'
                    : 'text-gray-600'
                ]"
              >
                {{ t }}
              </view>
            </view>
            <view class="text-xs text-gray-400"
              >共 {{ filteredList.length }} 项</view
            >
          </view>
        </view>

        <view class="mt-4 space-y-4 pb-16">
          <view v-for="item in filteredList" :key="item.id" class="mb-[10rpx]">
            <DonationCard :key="item.id" :item="item" @donate="onDonate" />
          </view>

          <view
            v-if="filteredList.length === 0"
            class="text-center text-gray-400 py-8"
          >
            暂无项目，换个分类看看吧 ~
          </view>
        </view>
      </view>
    </template>
  </Layout>
</template>

<script setup lang="ts">
import Layout from '@/components/Layout/tabbarLayout.vue'
import { ref, computed, onMounted } from 'vue'
import DonationCard from './components/DonationPage.vue'
import useStore from '@/store'
import { getDoanet, addDonate } from '@/api/donate.api'

const { useSafeArea } = useStore()

const user = uni.getStorageSync('user')

const tabs = ['全部', '食品', '医疗', '文具']
const activeTab = ref(0)

const list = ref<DonationItem[]>([])

const filteredList = computed(() => {
  if (activeTab.value === 0) return list.value
  return list.value.filter((i) => i.materialCategory === activeTab.value)
})

async function onDonate(item: DonationItem) {
  const params = {
    materialId: item.id,
    count: 1,
    userId: user.id
  }
  const res = await addDonate<typeof params, any>(params)
  if (res.code === 200) {
    uni.showToast({
      title: '捐赠成功'
    })
  }
}

onMounted(async () => {
  const res = await getDoanet<any, DonationItem>({})
  if (res.code === 200) {
    list.value = res.data.items
  }
})
</script>

<style scoped></style>
